<script setup>
import {ref} from "vue";

const message = ref({
  name: '',
  email: '',
  phone: '',
  info: ''
})
const onSubmit = () => {
  const e = message.value;
  const body = `名字：${e.name}    邮箱：${e.email}    手机：${e.phone}    内容：${e.info}`;
  const msg = `Subject=信息咨询&Body=${body}`;
  window.open(`Mailto:kingsun@neocross.com?${msg}`);
}
</script>

<template>
  <view class="seg1 container">
    <span class="font140 inter top25 bottomIn d3s">TENBIL</span>
    <view class="font60 top6 bottomIn d3s">品牌出海先行者</view>
  </view>
  <view class="seg2 container row">
    <view class="column half">
      <view class="font90">Contact Us</view>
      <view class="font36">联系我们</view>
    </view>
    <view class="column half">
      <view class="font20 label">名字/Name</view>
      <input type="font18 text" placeholder="Name" v-model="message.name"/>
      <view class="font20 label">邮箱/Email</view>
      <input type="font18 email" placeholder="Email" v-model="message.email"/>
      <view class="font20 label">手机/Phone number</view>
      <input type="font18 phone" placeholder="Phone number" v-model="message.phone"/>
      <view class="font20 label">信息/Message</view>
      <textarea class="font24" placeholder="您的需求/建议/想咨询的项目" v-model="message.info"/>
      <view class="row button" @click="onSubmit">发送信息</view>
    </view>
  </view>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * (1024 / 1920));
  background-size: cover;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_contact_banner.png");
}

.seg2.container {
  height: calc(100vw * (1072 / 1920));
  padding-top: 6%;

  .label {
    color: #979797;
  }

  input {
    background: transparent;
    border-radius: 16px;
    color: #00c6f7;
    resize: vertical;
    box-shadow: none;
    height: 7%;
    padding: 0.8em;
    border: solid 1px #979797;
    margin-top: 2%;
    margin-bottom: 6%;
  }

  textarea {
    color: #00c6f7;
    height: 24%;
    max-height: 24%;
    border-radius: 16px;
    margin-top: 2%;
    padding: 0.8em;
    border: solid 1px #979797;
    background: transparent;
  }

  .button {
    background-color: #00c6f7;
    align-items: center;
    color: #171C61;
    font-weight: 500;
    border-radius: 16px;
    width: 100%;
    height: 4.44em;
    margin: auto;
    justify-content: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;

    &:active {
      background-color: #A5c0f0;
    }
  }
}
</style>